.disappeared{
    animation: disAnmiation 0.75s ease forwards;
    -moz-animation: disAnmiation 0.75s ease forwards;
    -webkit-animation: disAnmiation 0.75s ease forwards;
    -o-animation: disAnmiation 0.75s ease  forwards;
}

.appeared{
    animation: appAnmiation 0.75s ease forwards;
    -moz-animation: appAnmiation 0.75s ease  forwards;
    -webkit-animation: appAnmiation 0.75s ease forwards;
    -o-animation: appAnmiation 0.75s ease forwards;
}

/* 消失动画 */
@keyframes disAnmiation{
    from{
        opacity: 100%;
    }
    to{
        opacity: 0%;
    }
}

@-moz-keyframes disAnmiation /* Firefox */
{
    from{
        opacity: 100%;
    }
    to{
        opacity: 0%;
    }
}

@-webkit-keyframes disAnmiation /* Safari 和 Chrome */
{
    from{
        opacity: 100%;
    }
    to{
        opacity: 0%;
    }
}

@-o-keyframes disAnmiation /* Opera */
{
    from{
        opacity: 100%;
    }
    to{
        opacity: 0%;
    }
}

/* 出现动画 */
@keyframes appAnmiation{
    from{
        opacity: 0%;
    }
    to{
        opacity: 100%;
    }
}

@-moz-keyframes appAnmiation /* Firefox */
{
   from{
        opacity: 0%;
    }
    to{
        opacity: 100%;
    }
}

@-webkit-keyframes appAnmiation /* Safari 和 Chrome */
{
   from{
        opacity: 0%;
    }
    to{
        opacity: 100%;
    }
}

@-o-keyframes appAnmiation /* Opera */
{
   from{
        opacity: 0%;
    }
    to{
        opacity: 100%;
    }
}